<%--
  Created by IntelliJ IDEA.
  User: jun
  Date: 2019/4/24
  Time: 10:38 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>闲聊</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        a {
            color: #00B7FF;
        }

        html {
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: black;
            font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;

        }

        input {
            outline: none;
        }

        .msg-info {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            z-index: 1;
        }

        .msg-item-wrap {
            width: 100%;
            min-height: 44px;
            margin: 10px 0;
            overflow-y: auto;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

        .img-wrap {
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }

        .time-and-msg-wrap {
            width: 65%;
            min-height: 40px;
        }

        .user-head-img {
            width: 40px;
            height: 40px;
            border-radius: 500px;
        }

        .item-name-wrap {
            min-width: 10px;
            color: #77787b;
            margin-bottom: 2px;
            padding-left: 3px;
        }

        .item-msg-wrap {
            min-width: 10px;
            min-height: 12px;
            padding: 9px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .my-msg-background-color {
            background-color: #79FF79;
        }

        .main-wrap {
            width: 100%;
            height: 100%;
            overflow-y: hidden;
            background-color: #F0F0F0;
        }

        td {
            height: 40px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 10px;
            border: 0;
            background-color: #00B7FF;
            color: #fafafa;
            cursor: pointer;
            font-size: 20px;
        }

        .btn:hover {
            background-color: aqua;
            color: black;
            transition: background-color 1s;
        }

        .btn:active {
            background-color: #cccccc;
            color: white;
        }

        .input-wrap {
            width: 100%;
            height: 15%;
            position: fixed;
            bottom: 0;
            background: rgba(240, 240, 240, 0.97);
            border-top: solid 1px #d3d7d4;
            z-index: 5;
        }

        .text-or-video {
            width: 10%;
            height: 100%;
        }

        .text-input-wrap {
            width: 70%;
        }

        .emoji-input {
            width: 20%;
        }

        .msg-input {
            width: 80%;
            height: 30px;
            margin-top: 15px;
            line-height: 20px;
            font-size: 25px;
            padding-left: 10px;
            border-radius: 10px;
            border: solid 0 #000;
        }
    </style>
</head>
<body>
<div class="main-wrap">
    <div class="msg-info j_main">
        <div class="msg-item-wrap">
            <div class="img-wrap float-left">
                <img src="" class="j_other_img user-head-img">
            </div>
            <div class="time-and-msg-wrap float-left">
                <div class="item-name-wrap">
                    <span>哈哈哈</span>
                </div>
                <div class="item-msg-wrap float-left">
                    <span>这个是信息肯德基分管领导杰夫格林经典老歌经典老歌回家的路上</span>
                </div>
            </div>
        </div>
        <div class="msg-item-wrap">
            <div class="img-wrap float-right">
                <img src="" class="j_my_img user-head-img">
            </div>
            <div class="time-and-msg-wrap float-right">
                <div class="item-msg-wrap float-right my-msg-background-color">
                    <span>这个是信息肯德基分管领导杰夫格林经典老歌经典老歌回家的路上经典老歌回家的路上分法</span>
                </div>
            </div>
        </div>
    </div>
    <div class="input-wrap">
        <div class="text-or-video float-left">
        </div>
        <div class="text-input-wrap float-left">
            <input type="text" class="msg-input j_msg">
        </div>
        <div class="emoji-input float-left">
            <!--<input type="button" class="btn  j_btn_send" value="等待...">-->
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/js/common/jquery.1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/js/common/socket.io.js"></script>
<script>
    var socket = io.connect('http://192.168.1.70:3000');
    var GData = {
        wxUserInfoObj: ${wxUserInfoObj},
        wxConfigObj: ${wxConfigObj},
        n: ${wxUserInfoObj}['nickname'],
        g: 0,
        img: ${wxUserInfoObj}['headImgUrl'],
        myImgUrl: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJLP6GZ0MpmFWqibhBZBhGoRBPaNuJk1d8dTuFOD905ZrNNxJDTo09ViaPvb3bXgsNQh9h0wxfFJ4kA/132',
        otherImgUrl: 'http://thirdwx.qlogo.cn/mmopen/vi_32/VhQxFkibtQEve3nx1VgojkP1G2B1kongpzltVibYvjQC6hGUjR0MJu0G1q2rxR2fh13YZyZ0mx47QS9glTx2N4kQ/132',
        otherMsgMould: '<div class="msg-item-wrap"><div class="img-wrap float-left"><img src="{{img}}" class="j_other_img user-head-img"></div><div class="time-and-msg-wrap float-left"><div class="item-name-wrap"><span>{{name}}</span></div><div class="item-msg-wrap float-left"><span>{{msg}}</span></div></div></div>',
        myMsgMould: '<div class="msg-item-wrap"><div class="img-wrap float-right"><img src="{{img}}" class="j_my_img user-head-img"></div><div class="time-and-msg-wrap float-right"><div class="item-msg-wrap float-right my-msg-background-color"><span>{{msg}}</span></div></div></div>'
    };
    var SFunc = {
        on: function () {
            socket.on('connectSuccess', function () {
                $('.j_btn_send').val('发送');
                GFunc.joinGroup();
            });
            socket.on('showMsg', function (data) {
                data['img'] = data['img'] || GData.otherImgUrl;
                GFunc.show(data, GData.otherMsgMould);
            });
            socket.on('errorMsg', function (data) {
                $('.j_main').append('<span>' + data + '</span><br>');
            });
        }
    };
    var GFunc = {
        onKeyDown: function () {
            document.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                // enter 键
                if (e && e.keyCode == 13) {
                    GFunc.send();
                }
            };
        },
        init: function () {
            var data = GFunc.queryData();
            GData.n = data['n'] || GData.n;
            GData.g = data['g'] || GData.g;
            $('.j_other_img').attr('src', GData.otherImgUrl);
            $('.j_my_img').attr('src', GData.myImgUrl);
        },
        bind: function () {
            $('.j_btn_send').click(function () {
                GFunc.send();
            });
        },
        joinGroup: function () {
            socket.emit('joinGroup', GData);
        },
        send: function () {
            var msg = $('.j_msg').val();
            if (msg.trim() == '') {
                alert('请输入信息');
                return;
            }
            $('.j_msg').val('');
            var data = {
                name: GData.n,
                msg: msg,
                img: GData.img
            };
            GFunc.show(data, GData.myMsgMould);
            socket.emit('send', msg);
        },
        show: function (data, mould) {
            mould = mould.replace('{{img}}', data.img).replace('{{name}}', data.name).replace('{{msg}}', data.msg);
            $('.j_main').append(mould);
        },
        queryData: function () {
            var data = {};
            var searchStr = window.location.search;
            var arr = searchStr.substr(1).split('&');
            arr.map(function (v, i) {
                var queryArr = v.split('=');
                data[queryArr[0]] = queryArr[1] || '';
            });
            return data;
        }
    };
    $(function () {
        GFunc.bind();
        SFunc.on();
        GFunc.init();
        GFunc.onKeyDown();
    });
</script>
</body>
</html>
